<?xml version="1.0" encoding="UTF-8" ?>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Farbtastic</title>
	<link rel="stylesheet" href="css/farbtastic.css" type="text/css" />
 	<script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
 	<script language="javascript" type="text/javascript" src="js/farbtastic.js"></script>
 	<script language="javascript" type="text/javascript">
 	 function showHidePicker(picker,id,initcolor)  
 	  {  
 		 if($('#btn_'+picker).val()=="...")
 		{
 	    	 $('#'+picker).css("display","block");
 		 	$('#'+picker).farbtastic('#'+id, initcolor);
 		 	$('#btn_'+picker).val("OK");
 		}
 		 else
 		{
 			$('#'+picker).css("display","none");
 			$('#btn_'+picker).val("...");
 		}
 	  }  
 	  
 	 
 	</script>
</head>
<body>  
	<table>
	<tr>
	<td><input type="text" id="color1" name="color" value="the init color is #94d77f" /></td>
	<td>
	<div id="picker1" style="display: none;"></div>
	<input id="btn_picker1" type="button" value="..." onclick="showHidePicker('picker1','color1','#94d77f')" />
	</td>
	</tr>
	<tr>
	<td><p id="color2" style="width: 100px;height:50px;border: 1px solid black;" >the init color is #ffffff</p></td>
	<td>
	<div id="picker2" style="display: none;"></div>
	<input id="btn_picker2" type="button" value="..." onclick="showHidePicker('picker2','color2','#ffffff')" />
	</td>
	</tr>
	<tr>
	<td><div id="color3" style="width: 100px;height:50px;border: 1px solid black;" >the init color is #7fd7bb</div></td>
	<td>
	<div id="picker3" style="display: none;"></div>
	<input id="btn_picker3" type="button" value="..." onclick="showHidePicker('picker3','color3','#7fd7bb')" />
	</td>
	</tr>
	</table>
</body>  
</html>